<!--  -->
<template>
  <div>
    <div class="song_list">
      <div class="list_wrap">
        <div class="item_wrap" v-for="(item, index) in albumList" :key="index">
          <div class="item">
            <div @click="toDetail(item.id)" class="cover">
              <el-image :src="item.picUrl" fit="cover"></el-image>
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="song_count">{{ item.size }}首</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserAlbum } from "util/music.js";
import { mapGetters } from "vuex";

export default {
  name: "",
  data() {
    return {
      albumList: [],
      //最新页
      currentPage: 1,
      count: 0,
    };
  },
  computed: {
    ...mapGetters("userInfo", [
      //个人信息
      "userinfo",
      //登录状态
      "loginStatus",
      //用户id
      "userId",
      //歌单
      "userPrivatePlayList",
    ]),
  },
  created() {
    this.getUserAlbum();
  },
  methods: {
    async getUserAlbum(page) {
      // console.log(page);
      let { data } = await getUserAlbum(50);
      //   console.log(data);
      this.count = data.count;
      this.albumList = data.data;
    },
    //跳转至专辑详情
    toDetail(id) {
      this.$router.push("/abumetail/" + id);
    },
  },
};
</script>

<style scoped lang='less'>
.list_wrap {
  display: flex;
  flex-wrap: wrap;
  display: grid;
  justify-content: space-around;
  align-content: center;
  grid-template-columns: repeat(auto-fill, 18rem);
  .item_wrap {
    height: 28rem;
    .item {
      // width: 12.5rem;
      //   height: 15.625rem;
      position: relative;
      .cover {
        //   height: 13rem;
        // height: 194px;
        height: 18rem;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 6px;
          box-shadow: 0px 2px 12px 0 rgba(0, 0, 0, 0.2);
        }
        img {
          transition: 2s;
        }
      }
      .count {
        position: absolute;
        top: 2%;
        right: 6%;
        font-size: 10px;
        color: #fff;
        .iconfont {
          font-size: 14px;
          margin-right: 3px;
        }
      }
      .name {
        width: 200px;
        color: #373737;
        font-size: 14px;
        line-height: 35px;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .song_count {
        font-size: 12px;
        color: #9f9f9f;
      }
    }
  }
}
</style>